<script setup lang="ts">
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'
const items = ref([
  {
    title: "PPT 设计资产管理",
    description: "全员共享模板/素材资源库",
    imageUrl: "/images/backgroundImg/assetManagement.png",
    width: "520px",
    backgroundColor: "rgb(31, 33, 43)",
    colorP: 'hsl(0deg 0% 100% / 60%)',
    colorH: "#fff"

  },
  {
    title: "模板规范管理",
    description: "设计标准统一应用",
    imageUrl: "/images/backgroundImg/standardized.png",
    width: "347px",
    backgroundColor: "rgb(31, 33, 43)",
    colorP: 'hsl(0deg 0% 100% / 60%)',
    colorH: "#fff"
  },
  {
    title: "素材合规性",
    description: "版权素材管理/使用，规避侵权风险",
    imageUrl: "/images/backgroundImg/material.png",
    width: "347px",
    backgroundColor: "rgb(31, 33, 43)",
    colorP: 'hsl(0deg 0% 100% / 60%)',
    colorH: "#fff"
  },
  {
    title: "成员管理",
    description: "支持差异化权限管理",
    imageUrl: "/images/backgroundImg/member.png",
    width: "347px",
    backgroundColor: "rgb(31, 33, 43)",
    colorP: 'hsl(0deg 0% 100% / 60%)',
    colorH: "#fff"
  },
  {
    title: "离职交接",
    description: "授权分配灵活，保障内容资产",
    imageUrl: "/images/backgroundImg/departureExchange.png",
    width: "347px",
    backgroundColor: "rgb(31, 33, 43)",
    colorP: 'hsl(0deg 0% 100% / 60%)',
    colorH: "#fff"
  },
  {
    title: "数据统计",
    description: "团队成员使用数据一目了然",
    imageUrl: "/images/backgroundImg/dataStatistics.png",
    width: "520px",
    backgroundColor: "rgb(31, 33, 43)",
    colorP: 'hsl(0deg 0% 100% / 60%)',
    colorH: "#fff"
  },
])
</script>

<template>
  <div class="teamFather">
    <h2>团队协作</h2>
    <div class="teanmWorkBox">
      <MyComponent class="MyComponent" v-for="(item, index) in items" :key="index" :title="item.title"
        :description="item.description" :imageUrl="item.imageUrl" :width="item.width"
        :backgroundColor="item.backgroundColor" :colorP="item.colorP" :colorH="item.colorH"
        :style="index === 0 ? { cursor: 'url(/mouse.png), auto' } : {}">
      </MyComponent>
    </div>
  </div>
</template>

<style scoped lang="less">
.teamFather {
  background-color: rgb(12, 14, 21);
  margin-top: 100px;
  padding-bottom: 100px;
  min-width: 1300px;

  h2 {
    font-size: 50px;
    text-align: center;
    color: #fff;
    padding-top: 100px;
    padding-bottom: 50px;
  }
}

.teanmWorkBox {
  display: flex;
  width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;

  .MyComponent {
    cursor: default;
    height: 450px;
    margin: 11px;
  }
}
</style>
